<div id="createThread1" class="reveal-modal small" data-reveal data-options="closeOnBackgroundClick:false" style="background:none !important;border:none;box-shadow:none;">
<div class="row">
	  <div class="small-11 large-12 columns small-centered" style="padding:0;">
	    <div class="alert-panel" data-alert>
	      <div class="alert-panel-title">

	     <label><strong style="color:white;">Create New Thread</strong></label>
	      </div>
	      <div class="alert-panel-message">
                <div class="row collapse">
                    <div class="small-3 large-2 columns">
                      <span  class="prefix" style="border:none;color:gray;">Title</span>
                    </div>
                    <div class="small-9 large-10 columns">
                      <input id="forum_title" type="text" style="border:none;">
                    </div>
                </div>          
	        <div class="row" style="padding:0;">
	            <div class="medium-12 column">
	                <label style="color:#009EA1"><strong >Thread Category</strong></label>

                	<select id="forum_category" style="border:none;">
                <?php 
                $category = 'music, journalism, publishing, screenwriting, filmmaking, acting, photojournalism, cosmetics, fragrances, editing, photography, event planning, event management, copy editing, proofreading, author editing, indexing, copywriting, computer programming, web design, graphic design, website development, consulting, tour guiding, video editing, video production, translating, illustrating'; 
                $categories = explode(",", $category);
                foreach ($categories as $x) {
                ?>
                		<option><?=ucwords($x) ?></option>
                <?php } ?>
                	</select>
                </div>
                <div class="medium-12 column">
             		<label style="color:#009EA1"><strong>Thread Content</strong></label>
             		<textarea id="forum_content" placeholder="Place your content here" style="min-height:100px;height:100%;border:solid 1px #DFE0E4;border-radius:.35rem;"></textarea>
					
					
                </div>         	
	        </div>
	      </div>
	      <div class="alert-panel-action">
	        <a class="tiny button radius secondary">Cancel</a>
	        <a id="forum_next"  class="tiny button radius success">Next</a>
	        <!-- data-reveal-id="createThread2"-->
	      </div>
	    </div>
	  </div>
	</div>    
</div>

<div id="createThread2" class="reveal-modal small" data-reveal data-options="closeOnBackgroundClick:false" style="background:none !important;border:none;box-shadow:none;">
<div class="row">
	  <div class="small-11 large-12 columns small-centered" style="padding:0;">
	    <div class="alert-panel" data-alert>
	      <div class="alert-panel-title">

	     <label><strong style="color:white;">Create New Thread (Insert Image)</strong></label>
	      </div>
	      <div class="alert-panel-message">         
	        
	        <div class="row" style="padding:0;">

	        <div class="medium-4 column">
	        	<a id="browse1" class="transformbtn radius tiny button">Browse Image</a> 
	     		<a class="radius th" >
				  <img id="image1" src="<?=BASE_URI ?>img/icons/addimg.png">
				  <input type="file" accept = "image/*" id="upload1" name="profile_pic" style="visibility: hidden; width: 1px; height: 1px" multiple />
				</a>    	
	        </div>
	        <div class="medium-4 column">
	        	<a  id="browse2" class="transformbtn radius tiny button">Browse Image</a> 
	    		<a class="radius th" >
				  <img id="image2" src="<?=BASE_URI ?>img/icons/addimg.png">
				  <input type="file" accept = "image/*" id="upload2" name="profile_pic" style="visibility: hidden; width: 1px; height: 1px" multiple />
				</a>     	
	        </div>
	        <div class="medium-4 column">
	        	<a id="browse3" class="transformbtn radius tiny button">Browse Image</a> 
	       		<a class="radius th" >
				  <img id="image3" src="<?=BASE_URI ?>img/icons/addimg.png">
				  <input type="file" accept = "image/*" id="upload3" name="profile_pic" style="visibility: hidden; width: 1px; height: 1px" multiple />
				</a> 
	        </div>       	
	        </div>
	      </div>
	      <div class="alert-panel-action">
	        <a id="forum_cancel"class="tiny button radius secondary">Cancel</a>
	        <a id="forum_save" class="tiny button radius success">Save</a>
	        
	      </div>
	    </div>
	  </div>
	</div>    
</div>


<script type="text/javascript">
	$(function(){
		$('#uploading').hide();

		function readURL(input,container)
		{
		    if (input.files && input.files[0]) {
		        var reader = new FileReader();
		        reader.onload = function (e) {
		            path = e.target.result;
		            $('#'+container).attr('src', path);
		            $('#'+container).val(path);
		        }
		        reader.readAsDataURL(input.files[0]);
		    }
		}

		function clearFields()
		{
			$('#image1').val('');
			$('#image2').val('');
			$('#image3').val('');		
			$('#forum_title').val('');
			$('#forum_content').val('');
		}

		function saveForum(title,category,content,image1,image2,image3){
			var params = {};
			params.title = title;
			params.category = category;
			params.content = content;
			params.image1 = image1;
			params.image2 = image2;
			params.image3 = image3;

			return $.ajax({
				url: URL + 'threads/create',
				type: 'post',
				data: params,
				dataType: 'json'
			});
		}

		function uploadPhotos(forum_id,image1,image2,image3){
			var params = {};
			params.forum_id = forum_id;
			params.image1 = image1;
			params.image2 = image2;
			params.image3 = image3;

			return $.ajax({
				url: URL + 'threads/upload',
				type: 'post',
				data: params,
				dataType: 'json'
			});	
		}

		$(document).ready(function(){
			$('#browse1').click(function(){
				$('#upload1').click();
			});
			$('#upload1').on('change',function(){
				readURL(this,'image1');
			});

			$('#browse2').click(function(){
				$('#upload2').click();
			});
			$('#upload2').on('change',function(){
				readURL(this,'image2');
			});

			$('#browse3').click(function(){
				$('#upload3').click();
			});
			$('#upload3').on('change',function(){
				readURL(this,'image3');
			});

			var title,category,content;
			
			$(document).on('click','#forum_next',function(){
				title = $('#forum_title').val();
				category = $('#forum_category').val();
				content = $('#forum_content').val();
				//$('#image1').val('wawawaaw');
				//alert($('#image1').val());
				if(title && category && content){
					$('#forum_save').html('Save');
					$('#createThread2').foundation('reveal','open');
				}


			});

			$(document).on('click','#forum_cancel',function(){
				
				$('#createThread2').foundation('reveal','close');
				
				clearFields();	
			});

			$(document).on('click','#forum_save',function(){
				var image1 = $('#image1').val();
				var image2 = $('#image2').val();
				var image3 = $('#image3').val();
				
				
				if($(this).html() != 'Save'){ return false;}
				
				$(this).html('<span id="uploading"><img src="<?= BASE_URI ?>img/loading2.gif"/> Processing  </span>');

				saveForum(title,category,content,image1,image2,image3).done(function(result){
					
					if(result.status == true){
							$('#forum_save').html('<span id="uploading"><img src="<?= BASE_URI ?>img/loading2.gif"/> Uploading Photos  </span>');
							uploadPhotos(result.forum_id,image1,image2,image3).done(function(result2){
								if(result2.status == true){
									$('#forum_save').html('Successfully Saved!');	
									setTimeout(function(){
										$('#createThread2').foundation('reveal','close');	
									},3000);
								}else{
									$('#forum_save').html('There is a problem uploading the photos please try uploading again later');	

									setTimeout(function(){
										$('#createThread2').foundation('reveal','close');	
									},3000)
								}
							});
					
					}else{
						alert(result.messages);
					}
				})
				

			});


		});
	});
	

</script>